<template>
  <div class="audit-log" style="height: 100%">
    <div class="left-container left-box">
      <!-- <div class="search">
        <el-input
          v-model="stationName"
          placeholder="请输入站点名称名称"
          clearable
        />
      </div> -->
      <div class="station-list">
        <div
          class="station-item"
          v-for="item in typeList"
          :key="item.id"
          :class="{ active: typeId === item.id }"
          @click="handleTypeClick(item)"
        >
          {{ item.name }}
        </div>
      </div>
    </div>
    <div class="right-box">
      <mTableLayout>
        <template #form>
          <mForm
            :configs="formConfigs"
            :col="3"
            :formData="formData"
            @search="onSearch"
          >
            <template #startTime>
              <el-date-picker
                v-model="formData.startTime"
                type="datetime"
                placeholder="请选择开始时间"
              />
            </template>
            <template #endTime>
              <el-date-picker
                v-model="formData.endTime"
                type="datetime"
                placeholder="请选择结束时间"
              />
            </template>
          </mForm>
        </template>
        <template #page-subtitle> </template>
        <!--template #op-btn>
          <el-button @click="batchExport" icon="Download">批量导出</el-button>
        </template-->
        <template #table>
          <mTable
            ref="mTableRef"
            :tableHeader="tableHeader"
            :tableData="tableData"
            :adapter="tableAjax"
            @selection-change="handleSelectionChange"
          >
            <template #name="{ row }">
              <el-button type="primary" link @click="handleDetail(row)">
                {{ row.name }}
              </el-button>
            </template>
            <template #action_type="{ row }">
              <div class="action_type_create" v-if="row.action_type == '新增'">
                {{ row.action_type }}
              </div>
              <div
                class="action_type_update"
                v-else-if="row.action_type == '修改'"
              >
                {{ row.action_type }}
              </div>
              <div class="action_type_delete" v-else>{{ row.action_type }}</div>
            </template>
            <template #login_at="{ row }">
              <div style="display: flex; width: 200px">
                <div style="width: 50%">
                  <img
                    v-if="row.auditor_a_id == 0"
                    :src="wait_icon"
                    class="success_icon"
                  />
                  <img
                    v-else-if="row.auditor_a_id != 0 && row.audit_flag == 1"
                    :src="success_icon"
                    class="success_icon"
                  />
                  <img
                    v-else-if="row.auditor_a_id != 0 && row.audit_flag == 3"
                    :src="success_icon"
                    class="success_icon"
                  />
                  <img
                    v-else-if="row.auditor_a_id != 0 && row.audit_flag == 4"
                    :src="fail_icon"
                    class="success_icon"
                  />
                  <img
                    v-else-if="row.auditor_a_id != 0 && row.audit_flag == 5"
                    :src="success_icon"
                    class="success_icon"
                  />
                  <span>科信科</span>
                </div>
                <div style="width: 50%">
                  <img
                    v-if="row.auditor_b_id == 0"
                    :src="wait_icon"
                    class="success_icon"
                  />
                  <img
                    v-else-if="row.auditor_b_id != 0 && row.audit_flag == 2"
                    :src="success_icon"
                    class="success_icon"
                  />
                  <img
                    v-else-if="row.auditor_b_id != 0 && row.audit_flag == 3"
                    :src="success_icon"
                    class="success_icon"
                  />
                  <img
                    v-else-if="row.auditor_a_id != 0 && row.audit_flag == 4"
                    :src="success_icon"
                    class="success_icon"
                  />
                  <img
                    v-else-if="row.auditor_b_id != 0 && row.audit_flag == 5"
                    :src="fail_icon"
                    class="success_icon"
                  />
                  <span>环卫科</span>
                </div>
              </div>
            </template>
            <template v-if="typeId == 0" #default="{ row }">
              <div v-if="row.is_audit == 1" style="width: 100%">
                <img
                  v-if="isAudit == 1"
                  @click="handleSuccess(row.id)"
                  src="@/assets/images/icon/tongyi_icon.png"
                  class="update_icon"
                />
                <img
                  v-if="isAudit == 1"
                  @click="handleFail(row.id)"
                  src="@/assets/images/icon/jujue_icon.png"
                  class="delete_icon"
                />
              </div>
            </template>
            <template v-if="typeId == 1" #default="{ row }"> </template>
          </mTable>
        </template>
      </mTableLayout>
    </div>

    <!-- 公共厕所 -->
    <publicToiletDetail v-if="routeType == 1" ref="publicToiletDetailRef" />
    <!-- 垃圾站 -->
    <garbageStationDetail v-if="routeType == 2" ref="garbageStationDetailRef" />
    <!-- 可回收物站点 -->
    <recyclingStationDetail
      v-if="routeType == 3"
      ref="recyclingStationDetailRef"
    />
    <!-- 环卫道班房 -->
    <sanitationRoomDetail v-if="routeType == 4" ref="sanitationRoomDetailRef" />
    <!-- 停车场 -->
    <parkingLotDetail v-if="routeType == 5" ref="parkingLotDetailRef" />
  </div>
</template>
<script setup>
import { unauditedTableHeader, auditTableHeader, formConfigs } from "./config";
import { ref, onMounted, computed, watch, nextTick } from "vue";
import { auditsList, audits } from "@/api/audits.js";
import { useRoute } from "vue-router";
import success_icon from "@/assets/images/icon/success_icon.png";
import fail_icon from "@/assets/images/icon/fail_icon.png";
import wait_icon from "@/assets/images/icon/wait_icon.png";
import { ElMessage, ElMessageBox } from "element-plus";

// 导入详情组件
import publicToiletDetail from "@/views/DataList/publicToilet/components/stationDrawer.vue";
import garbageStationDetail from "@/views/DataList/garbageStation/components/stationDrawer.vue";
import recyclingStationDetail from "@/views/DataList/recyclingStation/components/stationDrawer.vue";
import sanitationRoomDetail from "@/views/DataList/sanitationRoom/components/stationDrawer.vue";
import parkingLotDetail from "@/views/DataList/parkingLots/components/stationDrawer.vue";
// 导入详情接口
import { publicToiletsDetail } from "@/api/public_toilets.js";
import { garbageStationsDetail } from "@/api/garbage_stations.js";
import { recyclableSitesDetail } from "@/api/recyclable_sites.js";
import { sanitationRoomsDetail } from "@/api/sanitation_rooms.js";
import { parkingLotsDetail } from "@/api/parking_lots.js";
import { useAppStore } from "@/stores/app.js";
import { getUnreadCount } from "@/utils/unread.js";

const route = useRoute();

const publicToiletDetailRef = ref(null);
const garbageStationDetailRef = ref(null);
const recyclingStationDetailRef = ref(null);
const sanitationRoomDetailRef = ref(null);
const parkingLotDetailRef = ref(null);
defineOptions({
  name: "AuditList",
});
const typeList = ref([
  { name: "未审核项目", id: 0 },
  { name: "已完成审核", id: 1 },
]);
const projectTableList = ref([
  "public_toilets",
  "garbage_stations",
  "recyclable_sites",
  "sanitation_rooms",
  "parking_lots",
]);
// 路由参数
const routeType = ref("");
const typeId = ref(0); // 0未审核 1已完成审核
const tableHeader = computed(() => {
  return typeId.value === 0 ? unauditedTableHeader : auditTableHeader;
});
const appStore = useAppStore();
const isAudit = ref(null);
const formData = ref({
  startTime: "",
  endTime: "",
});

const mTableRef = ref(null);
const total = ref(0);
const selectionData = ref([]);
const tableData = ref([]);
const departments = ref([]);
onMounted(() => {
  if (appStore.userInfo?.roles?.audit?.indexOf("audit") >= 0) {
    isAudit.value = 1;
  } else {
    isAudit.value = 0;
  }
});
watch(
  () => route.query,
  (newVal) => {
    if (routeType.value !== newVal.type) {
      // 在这里切换不同的表格或者重新查询数据等
      nextTick(() => {
        mTableRef.value.fetchData(true);
        // 获取未审核数量
        getUnreadCount({
          project_table: projectTableList.value[routeType.value - 1],
          type: typeId.value,
        });
      });
    }
    routeType.value = newVal.type;
  },
  {
    immediate: true,
    deep: true,
  }
);

// 点击站点名称打开详情
const handleDetail = (row) => {
  console.log(row, "row");
  if (routeType.value == 1) {
    publicToiletsDetail({ id: row.target_item_id }).then((res) => {
      if (res.code == 0) {
        publicToiletDetailRef.value.openDrawer(res.data, "view", typeId.value);
      }
    });
  }
  if (routeType.value == 2) {
    garbageStationsDetail({ id: row.target_item_id }).then((res) => {
      if (res.code == 0) {
        garbageStationDetailRef.value.openDrawer(
          res.data,
          "view",
          typeId.value
        );
      }
    });
  }
  if (routeType.value == 3) {
    recyclableSitesDetail({ id: row.target_item_id }).then((res) => {
      if (res.code == 0) {
        recyclingStationDetailRef.value.openDrawer(
          res.data,
          "view",
          typeId.value
        );
      }
    });
  }
  if (routeType.value == 4) {
    sanitationRoomsDetail({ id: row.target_item_id }).then((res) => {
      if (res.code == 0) {
        sanitationRoomDetailRef.value.openDrawer(
          res.data,
          "view",
          typeId.value
        );
      }
    });
  }
  if (routeType.value == 5) {
    parkingLotsDetail({ id: row.target_item_id }).then((res) => {
      if (res.code == 0) {
        parkingLotDetailRef.value.openDrawer(res.data, "view", typeId.value);
      }
    });
  }
};

const handleSuccess = (ids) => {
  ElMessageBox.confirm("确定同意吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    audits({ id: ids, audit_type: "success" }).then((res) => {
      if (res.code == 0) {
        mTableRef.value.fetchData(true);
        ElMessage.success("同意成功");
      }
    });
  });
};

const handleFail = (ids) => {
  ElMessageBox.confirm("确定拒绝吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    audits({ id: ids, audit_type: "fail" }).then((res) => {
      if (res.code == 0) {
        mTableRef.value.fetchData(true);
        ElMessage.success("拒绝成功");
      }
    });
  });
};

const onSearch = (data) => {
  console.log(data.value);
  mTableRef.value.fetchData(true);
};
const handleTypeClick = (item) => {
  if (item.id === typeId.value) {
    return;
  }
  typeId.value = item.id;
  mTableRef.value.fetchData(true);
  // 获取未审核数量
  getUnreadCount({
    project_table: projectTableList.value[routeType.value - 1],
    type: typeId.value,
  });
};
// 列表请求
const tableAjax = async ({ pageSize, currentPage }) => {
  let o = {
    pageSize,
    page: currentPage,
    ...formData.value,
  };
  if (routeType.value == 1) {
    o.project_table = "public_toilets";
  } else if (routeType.value == 2) {
    o.project_table = "garbage_stations";
  } else if (routeType.value == 3) {
    o.project_table = "recyclable_sites";
  } else if (routeType.value == 4) {
    o.project_table = "sanitation_rooms";
  } else if (routeType.value == 5) {
    o.project_table = "parking_lots";
  }

  // o.project_table = "recyclable_sites";
  var res = await auditsList(o);
  console.log(res, "res");
  if (res.code == 0) {
    tableData.value = res.data;
    total.value = res.count || 0;

    departments.value = res.departments;
  }
  return {
    data: res.data,
    total: res.count || 0,
  };
};

//导出文件跳转下载
const handleAssignProject = (row) => {
  console.log(row);
  //window.location.href = "";
};

const batchExport = () => {
  console.log("批量导出");
};

// 页面上勾选的数据选择
const handleSelectionChange = (val) => {
  selectionData.value = val;
};
</script>
<style scoped lang="scss">
:deep(.demo-form-inline) {
  .el-input,
  .el-select {
    width: 220px;
  }
}
.audit-log {
  display: flex;
  height: 100%;
  transform: scale(1);
  .right-box {
    flex: 1;
    height: 100%;
    padding: 12px;
    padding-left: 12px;
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
    gap: 12px;
  }
}

.action_type_create {
  padding: 0px 18px;
  color: #347300;
  background: #d3ffa2;
  border: 1px solid #347300;
}

.action_type_update {
  padding: 0px 18px;
  color: #f2ba08;
  background: #f9efc7;
  border: 1px solid #f2ba08;
}

.action_type_delete {
  padding: 0px 18px;
  color: #f40606;
  background: #f9d2d2;
  border: 1px solid #f40606;
}
</style>
